<template>
  <div style="width: 90%;height: 100vh;padding: 40px 0px;color:var(--color-neutral-10);max-width: 1550px;margin: 0 auto">
    <p style="font-size: 24px;font-weight: bold;margin-bottom: 20px">学校开设专业信息管理</p>
    <div style="width: 100%;height: calc(100% - 64px);position: relative">
      <div style="width: calc(100%);height: 100%;display: inline-block;overflow-y: auto">
        <div style="margin-bottom: 20px;width: 100%;position: relative">
          <a-select :disabled="data.loading" @change="getTable" style="width:80px;line-height: 36px;height: 36px;margin-right: 10px;" v-model="data.form.level">
            <a-option>本科</a-option>
            <a-option>专科</a-option>
          </a-select>
          <a-input :disabled="data.loading" v-model="data.form.universityName" style="border: 0px;line-height: 36px;display: inline-block;width: 200px;margin-right: 10px;background-color: transparent;border-bottom: 1px solid var(--color-neutral-10)" placeholder="学校名称"></a-input>
          <v-btn :loading="data.loading" style="margin-right: 10px" variant="text"
                 @click="getTable"
          >搜索/刷新</v-btn>
          <a-trigger trigger="click" :unmount-on-close="false">
            <v-btn :disabled="data.loading" style="margin-right: 10px" variant="text"

            >导入</v-btn>
            <template #content>
              <div style="padding: 20px 20px;border-radius: 10px;background-color: var(--color-neutral-1);box-shadow: 0 4px 10px rgba(0,0,0,0.1);max-width: 300px">
                <p style="color: var(--color-neutral-10)">请导入包含学校开设专业介绍信息的JSON字符串的文本文件。</p>
                <a-upload @success="imported" :action="appData.serverURL + '/bg/schoolSpecial/import'"></a-upload>
              </div>
            </template>
          </a-trigger>
          <v-btn :disabled="data.loading || data.form.total==0" style="margin-right: 0px" variant="text"
                 @click="deleteAll"
          >清空</v-btn>
          <div v-if="data.form.total>data.form.size" style="display: inline-block;float: right">
            <v-btn variant="text" @click="data.form.page=1;getTable()" :disabled="data.loading || data.form.page==1" style="margin-left: 5px">第一页</v-btn>
            <v-btn variant="text" @click="data.form.page-=1;getTable()" :disabled="data.loading || data.form.page==1" style="margin-left: 5px">上一页</v-btn>
            <a-trigger trigger="click" :unmount-on-close="false">
              <v-btn variant="text" :disabled="data.loading" style="margin-left: 5px">{{ data.form.page.toString() + '/' + data.form.pageTotal.toString() }}</v-btn>
              <template #content>
                <div style="padding: 20px 20px;border-radius: 10px;background-color: var(--color-neutral-1);box-shadow: 0 4px 10px rgba(0,0,0,0.1)">
                  <a-input v-model="data.form.pageInput" placeholder="页码" style="width: 70px;"></a-input><a-button :loading="data.loading" @click="tableChangePage" :disabled="data.form.pageInput==''" style="margin-left: 5px">转到</a-button>
                  <br>
                  <p v-if="data.form.warningText!=''" style="color: red">{{ data.form.warningText }}</p>
                </div>
              </template>
            </a-trigger>
            <v-btn variant="text" @click="data.form.page+=1;getTable()" :disabled="data.loading || data.form.page==data.form.pageTotal" style="margin-left: 5px">下一页</v-btn>
            <v-btn variant="text" @click="data.form.page=data.form.pageTotal;getTable()" :disabled="data.loading || data.form.page==data.form.pageTotal" style="margin-left: 5px">最后一页</v-btn>
          </div>
        </div>
        <a-table @row-click="tableRowClick" :pagination="false" :loading="data.loading" style="width: 100%;" :columns="[
  { dataIndex: 'mark', title: '标记' },
  { dataIndex: 'universityName', title: '学校名称' },
  { dataIndex: 'majorName', title: '专业名称' },
  { dataIndex: 'level', title: '等级' },
  { dataIndex: 'className', title: '类名' },
  { dataIndex: 'bigClassName', title: '大类名' },
]" :data="data.table" />
      </div>

    </div>
  </div>
  <a-modal v-model:visible="data.showEditSchoolSpecialInfoForm" @ok="changeSchoolSpecialInfo" :closable="data.isSaving==false" :mask-closable="data.isSaving==false" :ok-loading="data.isSaving">
    <template #title>
      编辑学校开设专业信息
    </template>
    <div style="max-height: calc(80vh - 48px - 65px);overflow-y: scroll">
      <data-editor :read-only="data.isSaving==true" @dataChanged="SchoolSpecialInfoChanged" style="color: var(--color-neutral-10);width: 100%;background-color: white;border-radius: 5px;padding: 15px 15px 5px 15px" v-if="data.showEditSchoolSpecialInfoForm" :data="data.editSchoolSpecialInfoSelectedItem"></data-editor>
    </div>
  </a-modal>
</template>

<script>
import tool from '@/utlis/tool'
import config from '@/config'
import dataEditor from "@/components/dataEditor.vue";
import axios from "axios";

export default {
  components: {
    dataEditor
  },
  name: '',
  data() {
    return {
      data: {
        loading: false,
        form: {
          page: 1,
          size: 25,
          total: 0,
          pageTotal: 0,
          pageInput: '',
          warningText: '',
          universityName: '',
          level:'本科'
        },
        table: [],
        showEditSchoolSpecialInfoForm: false,
        editSchoolSpecialInfoSelectedItem: undefined,
        editSchoolSpecialInfoSelectedItemMark: undefined,
        isSaving: false,
      }
    }
  },

  methods: {
    async changeSchoolSpecialInfo() {
      this.data.isSaving = true
      this.data.editSchoolSpecialInfoSelectedItem['mark'] = this.data.editSchoolSpecialInfoSelectedItemMark.toString()
      const data = tool.encodeString(JSON.stringify({
        token: this.bgData.loginedAdminInfo.token,
        item: this.data.editSchoolSpecialInfoSelectedItem
      }))
      const file = new Blob([data], {type: 'text/plain'});
      const formData = new FormData();
      formData.append('file', file, 'filename.txt');
      await axios.post(config.serverURL + '/bg/schoolSpecial/change', formData, {
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      }).then(response => {
        console.log(response)
      })
      this.data.isSaving = false
      this.getTable()
    },
    SchoolSpecialInfoChanged(data) {
      this.data.editSchoolSpecialInfoSelectedItem = JSON.parse(JSON.stringify(data)).data
    },
    tableRowClick(data) {
      for (let i = 0; i < Object.keys(data).length; i++) {
        try {
          data[Object.keys(data)[i]] = JSON.parse(data[Object.keys(data)[i]])
        } catch (e) {

        }
      }
      data = JSON.parse(JSON.stringify(data))
      this.data.editSchoolSpecialInfoSelectedItemMark = data.mark
      delete data['mark']
      this.data.editSchoolSpecialInfoSelectedItem = data
      this.data.showEditSchoolSpecialInfoForm = true
    },
    async deleteAll() {
      this.data.loading = true
      await tool.axiosPostWithCheckStatus(config.serverURL, '/bg/schoolSpecial/delete', {
        token: this.bgData.loginedAdminInfo.token
      })
      this.data.loading = false
      this.data.form.page = 1
      this.getTable()
    },
    tableChangePage() {
      this.data.form.warningText = ''
      let a = parseInt(this.data.form.pageInput)
      if (isNaN(a)) {
        this.data.form.warningText = '页码应为数字'
        return
      } else {
        if (a < 1 || a > this.data.form.pageTotal) {
          this.data.form.warningText = '页码应在1到' + this.data.form.pageTotal.toString() + '之间'
          return
        }
        this.data.form.page = a
        this.getTable()
      }
    },
    imported() {
      this.getTable()
    },
    async getTable() {
      this.data.loading = true
      let re = (await tool.axiosPostWithCheckStatus(config.serverURL, '/bg/schoolSpecial/list', {
        token: this.bgData.loginedAdminInfo.token,
        page: this.data.form.page,
        size: this.data.form.size,
        universityName: this.data.form.universityName,
        level:this.data.form.level
      }))
      console.log(re)
      this.data.form.total = re.results.total
      this.data.form.pageTotal = tool.getPageTotal(re.results.total, this.data.form.size)
      this.data.table = re.results.data
      this.data.loading = false
    }
  },

  //生命周期 - 挂载完成（可以访问DOM元素）",html模板已渲染
  mounted() {
    this.getTable()
  },

  props: {
    appData: undefined,
    bgData: undefined
  },

  //监听属性 类似于data概念",
  computed: {},

  //监控data中的数据变化",
  watch: {},

  //生命周期 - 创建完成（可以访问当前this实例）",数据模型已加载，方法已加载,html模板已加载,html模板未渲染
  created() {
  },

  //生命周期 - 挂载之前",html模板未渲染
  beforeMount() {
  },

  //生命周期 - 更新之前",数据模型已更新,html模板未更新
  beforeUpdate() {
  },

  // 生命周期 - 销毁之前调用
  beforeDestroy() {
  },

  //生命周期 - 更新之后",数据模型已更新,html模板已更新
  updated() {
  },

  //生命周期 - 销毁完成"
  destroyed() {
  },

  //如果页面有keep-alive缓存功能，这个函数会触发",
  activated() {
  }
}
</script>

<style scoped>

</style>